<template>
  <el-dialog
    class="base-dialog"
    :title="title"
    :visible.sync="dialogVisible"
    width="90%"
    :fullscreen="false"
    append-to-body
    top="5vh"
    :close-on-click-modal="false"
    @open="$emit('open')"
    @close="$emit('close')"
  >
    <slot></slot>
    <span slot="footer" class="dialog-footer" v-if="footerShow">
      <el-button @click="closeHandle">取 消</el-button>
      <el-button v-if="resetting">重 置</el-button>
      <el-button
        type="primary"
        v-if="!lookFlag"
        :loading="loading"
        @click="handleConfirmClick"
        >提 交</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    fullscreen: {
      type: Boolean,
      default: false,
    },
    value: Boolean,
    title: String,
    lookFlag: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    resetting: {
      type: Boolean,
      default: false,
    },
    footerShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    closeHandle() {
      this.$confirm("是否关闭表单?", "提示", {
        confirmButtonText: "关闭",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.dialogVisible = false;
        })
        .catch(() => {});
    },
    handleConfirmClick() {
      this.$emit("confirm");
    },
  },
  beforeDestroy() {
    console.log(11);
  },
};
</script>
<style scoped>
.base-dialog >>> .el-dialog__body {
  max-height: 80vh;
  overflow: auto;
}
</style>
